<template>
  <div class="background-container">
    
    <div class="input-container">
      <el-autocomplete 
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="Please input"
        @select="handleSelect"
        class="custom-input"
      />
      <div class="query" @click="handleClick"></div>  
    </div>
    
    <div class="tag">
      <select v-model="selectedProvince" class="custom-select">
        <option value="" disabled selected>地区</option>
        <option v-for="item in provinces" :key="item.value" :value="item.value">
          {{ item.label }}
        </option>
      </select>

    <select v-model="selectedType" class="custom-select">
      <option value="" disabled selected>类型</option>
      <option v-for="item in genders" :key="item.value" :value="item.value">
        {{ item.label }}
      </option>
    </select>

    <select v-model="selectedBatch" class="custom-select">
      <option value="" disabled selected>批次</option>
      <option v-for="item in batches" :key="item.value" :value="item.value">
        {{ item.label }}
      </option>
    </select>

    <select v-model="selectedPubTime" class="custom-select">
      <option value="" disabled selected>公布时间</option>
      <option v-for="item in pubtimes" :key="item.value" :value="item.value">
        {{ item.label }}
      </option>
    </select>

    <select v-model="selectedCategory" class="custom-select">
      <option value="" disabled selected>类别</option>
      <option v-for="item in categories" :key="item.value" :value="item.value">
        {{ item.label }}
      </option>
    </select>
    </div>
  
    <div class="background"></div>
    
  </div>
  
</template>

<script>
  import { input_query_project,get_query_project } from '@/api/query';
  import { inject } from 'vue';
  import { onMounted, ref} from 'vue'
  import { useRouter } from 'vue-router';
export default {
  name: 'AutocompleteComponent',
   setup(props, { emit }) {
    const router = useRouter();
    const state = ref('');
    const selectedProvince = ref('');
    const selectedType = ref('');
    const selectedBatch = ref('');
    const selectedPubTime = ref('');
    const selectedCategory = ref('');

    const querySearchAsync = async (queryString, cb) => {
      if (!queryString) {
        cb([]);
        return;
      }
      try {
        const requestData = {
          province: selectedProvince.value,
          type: selectedType.value,
          batch: selectedBatch.value,
          time: selectedPubTime.value,
          category: selectedCategory.value,
          keyword: queryString // 确保使用 queryString 作为关键词
        };
        const response = await input_query_project(requestData);
        console.log(response)
        if (response) {
          // 转换后端返回的数据格式
          const suggestions = response.map(item => ({
            value: item.project_name,
            id: item.id
          }));
          cb(suggestions); // 传递转换后的数据
        } else {
          cb([]); // 返回空数组
        }
      } catch (error) {
        console.error('Failed to fetch suggestions:', error);
        cb([]); // 发生错误时返回空数组
      }
    };

    const handleSelect = (item) => {
      console.log('Selected item:', item);
      performCustomAction(item);
    };

    const handleClick = async () => {
      console.log('querying')
      const data = {
        province: selectedProvince.value,
        type: selectedType.value,
        batch: selectedBatch.value,
        time: selectedPubTime.value,
        category: selectedCategory.value,
        keyword: state.value
      };
      try {
        const response = await get_query_project(data);
        console.log('查询成功:', response.status_code);
        this.$router.push('/res');
      } catch (error) {
        console.error('查询失败:', error.message);
      }
    };

    const performCustomAction = async (item) => {
      console.log('Performing custom action with:', item);
      const data = {
        province: selectedProvince.value,
        type: selectedType.value,
        time: selectedPubTime.value,
        category: selectedCategory.value,
        batch: selectedBatch.value,
        keyword: state.value
      };
      try {
        const response = await get_query_project(data);
        console.log('查询结果:', response.status_code);
        emit('send-data', { response });
        router.push('/res');
      } catch (error) {
        console.error('查询失败:', error.message);
      }
    };

    return {
      state,
      selectedProvince,
      selectedType,
      selectedBatch,
      selectedPubTime,
      selectedCategory,
      querySearchAsync,
      handleSelect,
      handleClick
    };
  },
  data() {
    return {
      provinces: [
        { value: '1', label: '北京市' },
        { value: '2', label: '天津市' },
        { value: '3', label: '河北省' },
        { value: '4', label: '山西省' },
        { value: '5', label: '内蒙古自治区' },
        { value: '6', label: '辽宁省' },
        { value: '7', label: '吉林省' },
        { value: '8', label: '黑龙江省' },
        { value: '9', label: '上海市' },
        { value: '10', label: '江苏省' },
        { value: '11', label: '浙江省' },
        { value: '12', label: '安徽省' },
        { value: '13', label: '福建省' },
        { value: '14', label: '江西省' },
        { value: '15', label: '山东省' },
        { value: '16', label: '河南省' },
        { value: '17', label: '湖北省' },
        { value: '18', label: '湖南省' },
        { value: '19', label: '广东省' },
        { value: '20', label: '广西壮族自治区' },
        { value: '21', label: '海南省' },
        { value: '22', label: '重庆市' },
        { value: '23', label: '四川省' },
        { value: '24', label: '贵州省' },
        { value: '25', label: '云南省' },
        { value: '26', label: '西藏自治区' },
        { value: '27', label: '陕西省' },
        { value: '28', label: '甘肃省' },
        { value: '29', label: '青海省' },
        { value: '30', label: '宁夏回族自治区' },
        { value: '31', label: '新疆维吾尔自治区' },
        { value: '32', label: '新疆生产建设兵团' },
        { value: '33', label: '香港' },
        { value: '34', label: '澳门' },
        { value: '35', label: '中直单位' }
      ],
      genders: [
        { value: '1', label: '新增项目' },
        { value: '2', label: '扩展项目' }
      ],
      batches: [
        { value: '1', label: '第一批' },
        { value: '2', label: '第二批' },
        { value: '3', label: '第三批' },
        { value: '4', label: '第四批' },
        { value: '5', label: '第五批' }
      ],
      pubtimes: [
        { value: '1', label: '2006年' },
        { value: '2', label: '2008年' },
        { value: '3', label: '2011年' },
        { value: '4', label: '2014年' },
        { value: '5', label: '2021年' }
      ],
      categories: [
        { value: '1', label: '民间文学' },
        { value: '2', label: '传统音乐' },
        { value: '3', label: '传统舞蹈' },
        { value: '4', label: '传统戏剧' },
        { value: '5', label: '曲艺' },
        { value: '6', label: '传统体育、游艺与杂技' },
        { value: '7', label: '传统美术' },
        { value: '8', label: '传统技艺' },
        { value: '9', label: '传统医药' },
        { value: '10', label: '民俗' }
      ],
    }
  },
}
</script>

<style>
/* 输入框 */
.custom-input .el-input__inner {
  height: 8vh;
  width: 100%; /* 确保宽度填满父容器 */
  border: none; /* 移除边框 */
  padding: 1vw; 
  margin: 0; /* 移除外边距 */
  background: url('../../assets/query/input.png') no-repeat center center; /* 确保图片路径正确 */
  background-size: cover;
  color: #000;
  font-size: 3vh;
  border-radius: 4vh;
  box-sizing: border-box; /* 确保 padding 不会影响整体高度 */
}
.custom-input .el-input__wrapper {
  border: none; /* 移除外层边框 */
  box-shadow: none; /* 移除外层阴影 */
  background: transparent; /* 设置透明背景 */
}

.custom-input .el-input__wrapper:focus,
.custom-input .el-input__wrapper:hover,
.custom-input .el-input__wrapper:active,
.custom-input .el-input__wrapper:focus-within,
.custom-input .el-input__wrapper:focus-visible {
  border: none; /* 移除焦点边框 */
  box-shadow: none; /* 移除焦点阴影 */
  outline: none; /* 移除焦点轮廓 */
} 

/* 下拉框 */
.custom-input .el-autocomplete__suggestions {
  max-height: 50vh; /* 根据需要调整高度 */
  width:100%;
  overflow-y: auto;
  border-radius: 4vh; /* 圆角 */
  background-color: rgba(192, 178, 142, 0.7) !important;/* 背景色 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
  font-size: 2vh; /* 字体大小 */
}
/* 下拉框内项的内边距 */
.custom-input .el-autocomplete-suggestion__wrap {
  padding: 0.5vh 1vh; /* 内边距 */
}
/* 下拉框列表的最大高度 */
.custom-input .el-autocomplete-suggestion__list {
  max-height: 40vh; /* 根据需要调整最大高度 */
}
/* 下拉项样式 */
.custom-input .el-autocomplete-suggestion__item {
  padding: 1vh 2vh; /* 项目内边距 */
  cursor: pointer;
  transition: background-color 0.3s;
}

.custom-input .el-autocomplete-suggestion__item:hover {
  background-color: #f5f5f5; /* 悬停背景色 */
}

</style>

<style scoped>
.background-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100vh;
background-image: url('../../assets/query/back.png');
background-attachment: fixed;
background-size: 100vw 80vh;
background-position: center;
background-repeat: no-repeat;
}

.background {
width: 100vw;
height: 100vh;
margin-top:0vh;
background-image: url('../../assets/query/people.png');
background-position: center;
background-attachment: fixed;
background-size: contain;
background-repeat: no-repeat;
}

.input-container {
display: flex;
align-items: center;
justify-content: center;
width: 40vw;
margin-top: 25vh;
}
.query {
width: 2.5vw;
height: 2.5vw;
background-image: url('../../assets/query/search.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
margin-left: 1vw;
}

.custom-input::placeholder {
color: #999;
}

.tag {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: row;
margin-top: 5vh;
}

.custom-select {
width: 10vw;
height: 5vh;
margin: 1vh;
/* background-color: transparent; */
/* color: #fff; */
background-color: rgba(192, 178, 142, 0.7);
border: 1px solid rgb(192, 178, 142);
border-radius: 4px;
}

.custom-select option {
background-color: #865c33;
/* color: #fff; */
}

.custom-select option:hover {
/* background-color: #865c33; */
/* background-color: transparent; */
}
</style>